<template>
  <div class="bw-custom-com-emits">
    <a-button :block="true" type="primary" @click="onAdd()">
      新增事件
    </a-button>

    <ul class="bw-com-emit-list">
      <li class="bw-com-emit-item" v-for="item in curEmitList" :key="item.key">
        <span> {{ item.name }} </span>

        <div>
          <a-tooltip title="删除">
            <icon icon="ant-design:delete-outlined" @click="onDel(item.key)" />
          </a-tooltip>

          <a-tooltip title="编辑">
            <icon icon="ant-design:form-outlined" @click="onEdit(item)" />
          </a-tooltip>
        </div>
      </li>
    </ul>

    <BwAddEmit v-model:visible="curAddVisible" />
    <BwEditEmit v-model:visible="curEditVisible" :value="curEditInfo" />
  </div>
</template>

<script lang="ts" setup>
import { useMessage } from '@/hooks'
import { ref, computed } from 'vue'
import { useComDesignStoreWithOut } from '@/store'

import BwAddEmit from './coms/add.vue'
import BwEditEmit from './coms/edit.vue'

import type { BwCustomComEmitInfoModel } from '@bitwit/base-com-render'

const { createConfirm } = useMessage()
const designStore = useComDesignStoreWithOut()

const curAddVisible = ref<boolean>(false)
const curEditVisible = ref<boolean>(false)
const curEditInfo = ref<Nullable<BwCustomComEmitInfoModel>>(null)

const curEmitList = computed(() => {
  const info = designStore.curDesignInfo
  const curEmits = info?.emits
  return curEmits ?? []
})

/** 新增外放事件 */
const onAdd = () => {
  curAddVisible.value = true
}

/** 修改外放事件 */
const onEdit = (data: BwCustomComEmitInfoModel) => {
  curEditInfo.value = data
  curEditVisible.value = true
}

/** 删除外放事件 */
const onDel = (key: string) => {
  createConfirm({
    iconType: 'warning',
    title: () => '温馨提醒',
    content: () =>
      `移除当前外放事件，可能会影响到引用当前组件的页面运行，是否确定移除？`,
    onOk: async () => {
      designStore.onDelEmit(key)
    },
  })
}
</script>

<style lang="less" scoped>
.bw-custom-com-emits {
  padding: 0 8px;
  width: calc(100% - 16px);

  .bw-com-emit-list {
    width: 100%;
    margin-top: 8px;
    display: flex;
    flex-direction: column;

    .bw-com-emit-item {
      height: 30px;
      padding: 0 8px;
      margin-bottom: 8px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      border: 1px solid #e8e8e8;
      justify-content: space-between;
      width: calc(100% - 16px);
    }
  }
}
</style>
